<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta name="description" content="JavaScript UI library for building real-time TV dashboard, monitoring UI and IoT web interface">
<meta name="keywords" content="JavaScript,chart,dashboard,monitoring,IoT,real-time,free">
<meta name="robots" content="index,follow">
<meta name="subject" content="JavaScript UI library for building real-time TV dashboard, monitoring UI and IoT web interface">

<title>My Command Center</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
html,
body {
  font-family: Consolas, monaco, monospace;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-image: linear-gradient(to left top, #0385b8, #57dba2);
  opacity: 0.95;
  color: white;
}

#page {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 20px 20px;
}

.sc-title {
  padding: 10px;
  font-size: 25px;
}

.fan-rpm {
  color: #0c87eb;
  font-weight: bold;
}

h1 {
  font-size: 45px;
  line-height: 1;
  margin: 0px;
}

.capacity-title {
  font-size: 20px;
}

.temp-title {
  background-color: #57dba2;
  margin: 3px 14px;
}

/*
.border-left-white {
  border-left: 2px solid #E0E0E0;
}

.border-top-white {
  border-top: 2px solid #E0E0E0;
}
*/
</style>
<div class="container-fluid pt-4 pb-4" id="page">
  <div class="container">
    <div class="row">
      <div class="col-lg-8">
        <div class="row">
          <div class="col-lg-8">
            <h1>MY COMMAND CENTER</h1>
            <div><a href="https://github.com/shzlw/zeu" style="font-size: 18px;">by Zeu.js</a></div>
            <div style="font-size: 22px; font-weight: bold;">US-EAST-01</div>
          </div>
          <div class="col-lg-4">
            <h2>TIME</h2>
            <canvas id="digital-clock" width="200" height="50"></canvas>
          </div>
        </div>
        
        <canvas id="heartbeat" width="730" height="150"></canvas>
      </div>
      <div class="col-lg-4 border-left-white">
        <h2>VOLUME</h2>
        <div class="row no-gutters">
          <div class="col-2">
            <canvas id="bar-meter-1" width="65" height="200"></canvas>
          </div>
          <div class="col-2">
            <canvas id="bar-meter-2" width="65" height="200"></canvas>
          </div>
          <div class="col-2">
            <canvas id="bar-meter-3" width="65" height="200"></canvas>
          </div>
          <div class="col-2">
            <canvas id="bar-meter-4" width="65" height="200"></canvas>
          </div>
          <div class="col-2">
            <canvas id="bar-meter-5" width="65" height="200"></canvas>
          </div>
          <div class="col-2">
            <canvas id="bar-meter-6" width="65" height="200"></canvas>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-4">

        <div class="row no-gutters">
          <div class="col">
            <h2>TEMPERATURE</h2>
            <div class="row no-gutters text-center">
              <div class="col-3">
                <div class="temp-title">E1</div>
                <canvas id="volume-meter-1" width="80" height="150"></canvas>
              </div>
              <div class="col-3">
                <div class="temp-title">E2</div>
                <canvas id="volume-meter-2" width="80" height="150"></canvas>
              </div>
              <div class="col-3">
                <div class="temp-title">E3</div>
                <canvas id="volume-meter-3" width="80" height="150"></canvas>
              </div>
              <div class="col-3">
                <div class="temp-title">E4</div>
                <canvas id="volume-meter-4" width="80" height="150"></canvas>
              </div>
            </div>
          </div>
        </div>

        <h2 class="mt-2">COOLING</h2>
        <div class="row no-gutters text-center">
          <div class="col-3">
            <canvas id="round-fan-1" width="80" height="80"></canvas>
            <div><span id="fan-rpm-1" class="fan-rpm">0</span> RPM</div>
          </div>
          <div class="col-3">
            <canvas id="round-fan-2" width="80" height="80"></canvas>
            <div><span id="fan-rpm-2" class="fan-rpm">0</span> RPM</div>
          </div>
          <div class="col-3">
            <canvas id="round-fan-3" width="80" height="80"></canvas>
            <div><span id="fan-rpm-3" class="fan-rpm">0</span> RPM</div>
          </div>
          <div class="col-3">
            <canvas id="round-fan-4" width="80" height="80"></canvas>
            <div><span id="fan-rpm-4" class="fan-rpm">0</span> RPM</div>
          </div>
        </div>

        <div class="row no-gutters text-center">
          <div class="col-3">
            <canvas id="round-fan-5" width="80" height="80"></canvas>
            <div><span id="fan-rpm-5" class="fan-rpm">0</span> RPM</div>
          </div>
          <div class="col-3">
            <canvas id="round-fan-6" width="80" height="80"></canvas>
            <div><span id="fan-rpm-6" class="fan-rpm">0</span> RPM</div>
          </div>
          <div class="col-3">
            <canvas id="round-fan-7" width="80" height="80"></canvas>
            <div><span id="fan-rpm-7" class="fan-rpm">0</span> RPM</div>
          </div>
          <div class="col-3">
            <canvas id="round-fan-8" width="80" height="80"></canvas>
            <div><span id="fan-rpm-8" class="fan-rpm">0</span> RPM</div>
          </div>
        </div>

      </div>

      <div class="col-lg-4 border-top-white border-left-white">
        <h2>CLUSTER</h2>
        <div class="row no-gutters">
          <div class="col">

            <div class="row no-gutters text-center">
              <div class="col-6">
                <div class="sc-title">R-001</div>
                <canvas id="speed-circle-1" width="170" height="170"></canvas>
              </div>
              <div class="col-6">
                <div class="sc-title">R-002</div>
                <canvas id="speed-circle-2" width="170" height="170"></canvas>
              </div>
            </div>

            <div class="row no-gutters text-center">
              <div class="col-6">
                <div class="sc-title">S-001</div>
                <canvas id="speed-circle-3" width="170" height="170"></canvas>
              </div>
              <div class="col-6">
                <div class="sc-title">S-002</div>
                <canvas id="speed-circle-4" width="170" height="170"></canvas>
              </div>
            </div>
          </div>
          
        </div>

      </div>
      <div class="col-lg-4">

        <div class="row no-gutters">
          <div class="col">
            <h2>CAPACITY</h2>
            <div class="row no-gutters text-center">
              <div class="col-lg-3 pt-4 capacity-title">D-001</div>
              <div class="col-lg-9">
                <canvas id="text-meter-1" width="240" height="60"></canvas>
              </div>
            </div>

            <div class="row no-gutters text-center">
              <div class="col-lg-3 pt-4 capacity-title">D-002</div>
              <div class="col-lg-9">
                <canvas id="text-meter-2" width="240" height="60"></canvas>
              </div>
            </div>

            <h2 class="mt-2">JOB QUEUE</h2>
            <div class="row no-gutters text-center">
              <div class="col-3">
                <h5>Q-1</h5>
                <canvas id="text-box-1" width="80" height="40"></canvas>
                <canvas id="message-queue-1" width="80" height="200"></canvas>
              </div>
              <div class="col-3">
                <h5>Q-2</h5>
                <canvas id="text-box-2" width="80" height="40"></canvas>
                <canvas id="message-queue-2" width="80" height="200"></canvas>
              </div>
              <div class="col-3">
                <h5>Q-3</h5>
                <canvas id="text-box-3" width="80" height="40"></canvas>
                <canvas id="message-queue-3" width="80" height="200"></canvas>
              </div>
              <div class="col-3">
                <h5>Q-4</h5>
                <canvas id="text-box-4" width="80" height="40"></canvas>
                <canvas id="message-queue-4" width="80" height="200"></canvas>
              </div>
            </div>

          </div>
        </div>

      </div>
    </div>

  </div>
</div>

<script src="../dist/zeu.js"></script>
<script>
  var bgGreen = '#57dba2';
  var bgBlue = '#0385b8';
  var yellow = '#ecdf6c';
  var blue = '#0c87eb';

  var orange = '#ff5722';

  var oranges = ['#fff5f2', '#ffddd3', '#ffbca7', '#ff9a7b', '#ff7850', '#ff4107', '#e93600'];

  var COLOR = {
    lightGreen: '#00d7af',
    lightWhite: '#F8F8FF',
    lightGrey: '#E0E0E0',
    lightBlack: '#343a42',
    black: '#000000',
    white: '#ffffff',
    red: '#dc3547',
    blue: '#007bfb',
    yellow: '#ffc108',
    cyan: '#17a2b9',
    grey: '#6c757e',
    green: '#28a748',
    orange: '#ffa500',
    transparent: 'rgba(255, 255, 255, 0)'
  };

  zeu.Settings.fps = 120;

  var heartbeat = new zeu.Heartbeat('heartbeat',
    {
      viewWidth: 730,
      speed: 1,
      fontColor: COLOR.lightGrey,
      maxQueueCapacity: 50
    });
  heartbeat.scaleByHeight(150);
  setInterval(function() {
    heartbeat.beat({
      color: oranges[getRandomInt(0, oranges.length - 1)],
      space: getRandomInt(0, 10)
    });
  }, 500);

  var digitalClock = new zeu.DigitalClock('digital-clock', {
    numberColor: orange,
    dashColor: COLOR.transparent,
  });
  digitalClock.scaleByHeight(50);
  
  var barMeters = [];
  for (var i = 1; i <= 6; i++) {
    var barMeter = new zeu.BarMeter('bar-meter-' + i, {
      viewWidth: 65,
      dashColor: 'rgba(255, 255, 255, 0.2)',
      barColor: blue,
      gradient: true,
      speed: i * 2,
      space: 8
    });
    barMeters.push(barMeter);
  }
  setInterval(function() {
    for (var i = 0; i < 6; i++) {
      var value = getRandomInt(50, 100);
      barMeters[i].value = value;
      if (value > 75) {
        barMeters[i].barColor = orange;
      } else {
        barMeters[i].barColor = blue;
      }
    }
  }, 1000);

  var volumeMeters = [];
  for (var i = 1; i <= 4; i++) {
    var volumeMeter = new zeu.VolumeMeter('volume-meter-' + i, {
      viewHeight: 180,
      min: {
        fontColor: COLOR.white,
        value: 0,
        bgColor: COLOR.transparent,
      },
      max: {
        fontColor: COLOR.white,
        value: 100,
        bgColor: COLOR.transparent,
      },
      bar: {
        borderColor: COLOR.lightGrey,
        fillColor: orange,
        graident: false,
        speed: 10
      },
      marker: {
        bgColor: blue,
        fontColor: COLOR.white,
      },
    });
    volumeMeter.scaleTo(0.8, 0.8);
    volumeMeters.push(volumeMeter);
  }
  updateVolumeMeters();
  setInterval(function() {
    updateVolumeMeters();
  }, 3000);

  function updateVolumeMeters() {
    for (var i = 0; i < volumeMeters.length; i++) {
      volumeMeters[i].value = getRandomInt(0, 100);
    }
  }

  var roundFans = [];
  for (var i = 1; i <= 8; i++) {
    var roundFan = new zeu.RoundFan('round-fan-' + i, {
      fanColor: orange,
      center: {
        color: COLOR.lightGrey,
        bgColor: orange
      },
      speed: getRandomInt(1, 10)
    });
    roundFan.scaleByHeight(80);
    roundFans.push(roundFan);
  }
  updateFanSpeed();

  setInterval(function() {
    updateFanSpeed();
  }, 3000);

  function updateFanSpeed() {
    for (var i = 0; i < roundFans.length; i++) {
      var speed = getRandomInt(2, 7);
      roundFans[i].speed = speed;
      var color = bgGreen;
      if (speed <= 2) {
        color = bgGreen;
      } else if (speed <= 5) {
        color = blue;
      } else {
        color = orange;
      }
      roundFans[i].fanColor = color;
      roundFans[i].centerBgColor = color;
      var fanRpm = document.getElementById("fan-rpm-" + (i + 1));
      fanRpm.innerHTML = Math.floor(speed * 120 / 60);
      fanRpm.style.color = color;
    }
  }

  var textBoxes = [];
  for (var i = 1; i <= 4; i++) {
    var textBox = new zeu.TextBox('text-box-' + i, {
      text: {
        fontColor: COLOR.white,
        bgColor: oranges[3]
      },
      borderColor: COLOR.transparent,
      bgColor: COLOR.transparent,
      waveColor: COLOR.transparent
    });
    textBox.scaleByHeight(40);
    textBoxes.push(textBox);
  }

  var messageQueues = [];
  for (var i = 1; i <= 4; i++) {
    var messageQueue = new zeu.MessageQueue('message-queue-' + i, {
      viewWidth: 80,
      viewHeight: 200,
      barHeight: 12,
      space: 4,
      speed: 8,
      maxQueueCapacity: 50
    });
    messageQueues.push(messageQueue);
  }

  setInterval(function() {
    for (var i = 0; i < 4; i++) {
      var mq = messageQueues[i];
      var n = getRandomInt(0, 2);
      if (n == 0) {
        mq.pop();
      } else {
        var color = getRandomInt(0, 2);
        if (color == 0) {
          color = bgGreen;
        } else if (color == 1) {
          color = blue;
        } else {
          color = orange;
        }
        
        textBoxes[i].textBgColor = color;
        textBoxes[i].borderColor = color;

        mq.push({
          color: color,
          space: getRandomInt(4, 10),
        });
      }

      textBoxes[i].value = mq.queueSize;
    }
  }, 300);

  var speedCircles = [];
  for (var i = 1; i <= 2; i++) {
    var speedCircle = new zeu.SpeedCircle('speed-circle-' + i, {
      text: {
        value: 'ON',
        color: COLOR.white
      },
      circle1: {
        speed: getRandomInt(-1, 1),
        color: COLOR.lightGrey
      },
      circle2: {
        speed: getRandomInt(-1, 1),
        color: bgGreen
      },
      circle3: {
        speed: getRandomInt(-1, 1),
        color: COLOR.white
      },
      circle4: {
        speed: getRandomInt(-1, 1),
        color: oranges[4]
      }
    });
    speedCircle.scaleByHeight(170);
    speedCircles.push(speedCircle);
  }

  for (var i = 3; i <= 4; i++) {
    var speedCircle = new zeu.SpeedCircle('speed-circle-' + i, {
      text: {
        value: 'HIGH',
        color: COLOR.white
      },
      circle1: {
        speed: 1,
        color: oranges[3],
      },
      circle2: {
        speed: -2,
        color: oranges[2]
      },
      circle3: {
        speed: 3,
        color: oranges[1]
      },
      circle4: {
        speed: -4,
        color: oranges[0]
      }
    });
    speedCircle.scaleByHeight(170);
    speedCircles.push(speedCircle);
  }

  setInterval(function() {
    for (var i = 0; i < speedCircles.length; i++) {
      speedCircles[i].speed1 = 1 * getRandomInt(1, 3);
      speedCircles[i].speed2 = -2 * getRandomInt(1, 3);
      speedCircles[i].speed3 = 3 * getRandomInt(1, 3);
      speedCircles[i].speed4 = -4 * getRandomInt(1, 3);
    }
  }, 3000);

  var textMeters = [];
  for (var i = 1; i <= 2; i++) {
    var textMeter = new zeu.TextMeter('text-meter-' + i, {
      viewWidth: 400,
      arrowColor: blue,
      displayValue: 'MIDDLE',
      marker: {
        bgColor: yellow,
        fontColor: COLOR.white
      },
      bar: {
        speed: 15,
        fillColor: yellow,
        bgColor: COLOR.lightGrey,
        borderColor: COLOR.transparent
      }
    });
    textMeter.scaleByHeight(60);
    textMeters.push(textMeter);
  }
  updateTextMeters();
  setInterval(function() {
    updateTextMeters();
  }, 3000);

  function updateTextMeters() {
    for (var i = 0; i < textMeters.length; i++) {
       var value = getRandomInt(0, 100);
        textMeters[i].value = value;
        if (value <= 30) {
          textMeters[i].displayValue = 'LOW';
          textMeters[i].fillColor = bgGreen;
          textMeters[i].arrowColor = bgGreen;
          textMeters[i].markerBgColor = bgGreen;
        } else if (value >= 60) {
          textMeters[i].displayValue = 'HIGH';
          textMeters[i].fillColor = '#ff4107';
          textMeters[i].arrowColor = '#ff4107';
          textMeters[i].markerBgColor = '#ff4107';
        } else {
          textMeters[i].displayValue = 'MIDDLE';
          textMeters[i].fillColor = blue;
          textMeters[i].arrowColor = blue;
          textMeters[i].markerBgColor = blue;
        }
     }
  }

  function getRandomColor() {
    return '#' + ((1 << 24) * Math.random() | 0).toString(16);
  }

  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function shuffleArray(a) {
    var j = 0;
    var temp = 0;

    for (var i = a.length - 1; i > 0; i--) {
      j = Math.floor(Math.random() * (i + 1));
      temp = a[i];
      a[i] = a[j];
      a[j] = temp;
    }
    return a;
  }
</script>
</body>
</html>